import { getArtList } from "@/request/index";
import Footer from "@/components/footer";
import Header from "@/components/header";
import Page from "@/components/page";
import { useCallback, useEffect, useState } from "react";
import css from "./index.module.scss";
import { useRouter } from "next/router";
interface pageType {
  page: number;
  pageSize: number;
  current: number;
  total: number;
}
function Article(props: any) {
  const router = useRouter();
  const [pageInfo, setPageInfo] = useState<pageType>({
    page: 1,
    pageSize: 10,
    current: 1,
    total: 0,
  });
  const [list, setList] = useState([]);
  // 获取文章列表
  const getList = () => {
    getArtList({
      page: pageInfo.page,
      pageSize: pageInfo.pageSize,
      type: "",
      title: "",
    }).then((res: any) => {
      if (res.code === 0) {
        setList(res.data.articles);
        pageInfo.current = res.data.page / 1;
        pageInfo.total = res.data.total;
        setPageInfo({ ...pageInfo });
      }
    });
  };
  useEffect(() => {
    getList();
  }, [pageInfo.page]);
  // 获取文章详情
  const getDetail = (item: any) => {
    router.push({
      pathname: "/articleinfo",
      query: {
        id: item.id,
      },
    });
  };
  // 渲染list
  const renderList = () => {
    return (
      <div className={css.content}>
        {list && list.length > 0
          ? list.map((item: any) => {
              return (
                <div className={css.list} key={item.id}>
                  <div className={css.line} />
                  <div className={css.title}>{item.title}</div>
                  <div className={css.deriction}>{item.des}</div>
                  <div className={css.href} onClick={() => getDetail(item)}>
                    阅读全文
                  </div>
                </div>
              );
            })
          : null}
      </div>
    );
  };
  const pageChange = (val: number) => {
    pageInfo.page = val;
    pageInfo.current = val;
    setPageInfo({ ...pageInfo });
  };
  return (
    <div className={css.article}>
      <Header />
      {renderList()}
      <div className={css.page}>
        <Page
          change={pageChange}
          total={pageInfo.total}
          current={pageInfo.current}
        />
      </div>
      <div className={css.footer}>
        <Footer />
      </div>
    </div>
  );
}
export default Article;
